<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
	<head>
		<title>用户注册</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta http-equiv="Cache-Control" content="no-store" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<link rel="stylesheet" href="<c:url value="/css/reset-fonts-grids.css" />" type="text/css">
		<style>
* {text-align:left;}
a {
color:#0000CC;
text-decoration:none;
}
.header{
	border-bottom:1px solid #DBE0E3;
	height:79px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	width:1000px;
}
.win1000{
	width:1000px;
}
.title{
	position:absolute;
	border-left:1px solid #F6F6F6;
	height:39px;
	left:50px;
	padding-left:15px;
	top:24px;
	width:151px;
}
.title span{
color:#666666;
font:24px/1.8 "微软雅黑","黑体",sans-serif;
}

.body{
background:none repeat scroll 0 0 #FFFFFF;
clear:both;
margin:0 auto;
overflow:hidden;
margin-bottom:40px;
}
.left{
float:left;
font-size:14px;
min-height:400px;
padding-left:66px;
padding-top:40px;
width:676px;
}
.right{
background:url("<c:url value="/images/reg-line.gif" />") repeat-y scroll left center transparent;
float:right;
font-size:14px;
margin-top:40px;
min-height:400px;
padding-left:30px;
width:200px;
height:300px;
}
.right a {
margin-left:2px;
}

.left p{
line-height:2;
padding-bottom:12px;
padding-top:12px;
}
.right p{
line-height:28px;
padding-bottom:20px;
}
.label{
color:#666666;
display:block;
float:left;
width:78px;
}
.text{
border:1px solid #C8C8C8;
height:30px;
line-height:2;
margin-right:3px;
padding:0 3px;
vertical-align:middle;
width:228px;
}
.onFocus_color {
background:url("<c:url value="/images/inw-bg.gif" />") repeat-x scroll left top #FEFFE3;
border:1px solid #1D95F6;
}
.onError_color {
background:url("<c:url value="/images/inw-bg.gif" />") repeat-x scroll left top #FEFFE3;
border:1px solid #FF9A9A;
}
.onCorrect {
background:url("<c:url value="/images/reg-menu.gif" />") no-repeat scroll 0 -22px transparent;
display:inline-block;
height:16px;
padding-left:25px;
padding-right:5px;
vertical-align:middle;
}
.onFocus, .onError {
color:#000000;
display:inline-block;
font-size:12px;
padding-left:40px;
padding-right:5px;
position:relative;
vertical-align:top;
}
.onFocus,.onError{ width:287px; height:20px; padding-top:3px; background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0 0;}
.onFocus .action_po,.onError .action_po{ position:absolute; left:0; top:0;}
.onError{ background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0 -190px;}
.onError .action_po_top{ display:block; width:287px; padding:4px 10px 0 40px; min-height:10px; _height:10px; background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0px -190px;}
.onError .action_po_bot{ display:block; width:287px; height:5px; background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0px -375px; overflow:hidden;}
.onFocus{ background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0 0;}
.onFocus .action_po_top{display:block;width:287px;padding:3px 10px 0 40px;min-height:10px;_height:10px; background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0px 0;}
.onFocus .action_po_bot{display:block;width:287px;height:5px;background:url(<c:url value="/images/verification-ui6.gif" />) no-repeat 0px -185px;overflow:hidden;}
.butt, .xybutt {
background:url(<c:url value="/images/reg-btn.gif" />) no-repeat scroll right top transparent;
display:inline-block;
font-weight:700;
height:34px;
padding-right:1px;
}
.btns, .xybtn {
background:url(<c:url value="/images/reg-btn.gif" />) no-repeat scroll 0 0 transparent;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-size:14px;
font-weight:bold;
margin:0;
padding:6px 20px 7px;
}
.logintext{position:absolute; right:10px; top:50px; color:#ccc;}
.logintext a{margin:0 14px; color:#666;}
.logintext a:hover{ color:#ff0000; text-decoration:underline;}
</style>
		<script src="<c:url value="/js/jquery-1.4.4.js" />" type="text/javascript"></script>
		<script src="<c:url value="/js/formValidator-4.0.1.js" />?" type="text/javascript" charset="UTF-8"></script>
		<script src="<c:url value="/js/formValidatorRegex.js" />" type="text/javascript"></script>
		<script>
$(document).ready(function(){
	$.formValidator.initConfig({formID:"form1",
		submitAfterAjaxPrompt : '有数据正在服务器端验证，请稍等...'
	});
	$("#loginName").formValidator({onFocus:"请输入用户名，用户名需为6-20个字符（包括数字、字母、下划线）。"})
		.inputValidator({min:1,onError:"您还没有输入用户名"})
		.functionValidator({ fun: function(val, elem) {
            if (val.match("^[\\d]+$")) {
            	return "用户名不能全为数字";
            }
            if (val != null && val.length > 5 && val.length < 21) { 
            	return true; 
            }
            msg = "用户名需为6-20个字符（包括数字、字母、下划线）";
            return msg;
        }})
		.ajaxValidator({
		dataType : "json",
		url : "<c:url value="/site/overview/regist.do?method=ajaxValidateUser" />",
		success : function(data){
			if(data && data.result == "1") return true;
			return false;
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){alert("服务器没有返回数据，可能服务器忙，请重试");},
		onError : "该用户名不可用，请更换用户名"
	})
	.bind("change",function(){
		$("#otherName").val($(this).val());
	});
	$("#loginPassword").formValidator({onFocus:"密码需由6-16个字符（数字、字母、下划线）组成，区分大小写；不能使用重复、连续的字母、数字或下划线。"})
	.inputValidator({min:1,onError:"您还没有输入密码。"})
	.regexValidator({ regExp: "^([a-zA-Z0-9]|[_]){6,16}$", onError: "密码太短，最少为6位。密码不应超过16个字符。" })
	/*.functionValidator({ fun: function(val, elem) {
        	var pwd = val.toLowerCase();
            if((isContinuousChar(pwd)||isSameChar(pwd)) && pwd.match("^[a-z|A-Z]+$")){
            	return "为了您的账户安全，密码不能为重复字母和连续字母";
            }
            if((isContinuousChar(pwd)||isSameChar(pwd)) && pwd.match("^[\\d]+$")){
            	return "为了您的账户安全，密码不能为重复数字和连续数字";
            }
            if(pwd.match("^[_]+$")){
            	return "为了您的账户安全，密码不能全为下划线";
            }
        	
        	return true;
        }
        })*/;
	$("#repeatPassword").formValidator({onFocus:"请再次输入您的密码"})
	.inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码不能为空,请确认"})
	.compareValidator({desID:"loginPassword",onError:"密码不一致,请确认"});
	//$("#email").formValidator({onFocus:"请输入有效的电子邮箱，6－50个字符",defaultValue:"@"})
	//.inputValidator({min:6,max:50,onError:"您输入的电子邮箱长度不符合要求"})
	//.regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"你输入的邮箱格式不正确"});
	$("#otherName").formValidator({onFocus:"请输入昵称"}).inputValidator({min:1,onError:"您还没有输入昵称"});
});
    function isContinuousChar(str){
    	var str = str.toLowerCase();
        var flag = 0;
        for(var i=0;i<str.length;i++){
        	if(str.charCodeAt(i) != flag+1 && flag!=0)
        		return false;
        	else
        		flag = str.charCodeAt(i);
        }
        return true;
    }
    
    function isSameChar(str){
    	var str = str.toLowerCase();
        var flag = 0;
        for(var i=0;i<str.length;i++){
        	if(str.charCodeAt(i) != flag && flag!=0)
        		return false;
        	else
        		flag = str.charCodeAt(i);
        }
        return true;
    }

</script>
	</head>
	<body>
		<div class="header">
			<div class="title">
				<span>用户注册</span>
			</div>
			<div class="logintext">
				<a href="<c:url value="/site/index.jsp" />">返回首页</a></a>
			</div>
		</div>
		<div class="left">
			<html:form action="/site/overview/regist" styleId="form1">
				<input type="hidden" name="method" class="method" value="save" />
				<html:hidden property="id" />
				<p>
					<span class="label">用&nbsp;&nbsp;户&nbsp;&nbsp;名</span>
					<html:text property="loginName" styleId="loginName" styleClass="text" maxlength="20" />
					<span id="loginNameTip" style="z-index: 101;"></span>
				</p>
				<p>
					<span class="label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
					<html:password styleId="loginPassword" property="loginPassword" styleClass="text" maxlength="16" />
					<span id="loginPasswordTip" style="z-index: 100;"></span>
				</p>
				<p>
					<span class="label">确认密码</span>
					<input id="repeatPassword" class="text" maxlength="16" type="password">
					<span id="repeatPasswordTip"></span>
				</p>
				<p>
					<span class="label">昵称</span>
					<html:text styleId="otherName" styleClass="text" property="otherName" />
					<span id="otherNameTip"></span>
				</p>
				<p>
					<span class="label">&nbsp;</span>
					<label class="butt">
						<html:submit styleClass="btns" value="立即注册" />
					</label>
				</p>
			</html:form>
		</div>
		<div class="right">
			<p>
				您已经是注册用户，请<a href="<c:url value="/login.jsp" />">登录</a>
			</p>
			<div id="xxx">
			</div>
		</div>
	</body>
</html>
